<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<select onblur="get_city(this)" id="province" name="province" title="请选择所在省份" style="width: 200px;">
    <option value="">选择省份</option>
    {volist name="province" id="vo"}
        <option value="{$vo.id}">{$vo.name}</option>
    {/volist}
</select>
<select onblur="get_area(this)" id="city" name="city" title="请选择所在城市"  style="width: 200px;">
    <option value="">选择城市</option>
</select>
<select id="district" name="district" title="请选择所在区县"  style="width: 200px;">
    <option value="">选择区域</option>
</select>
</body>
</html>
<script>

    /**
     * 获取城市
     * @param t  省份select对象
     */
    function get_city(t){
        var parent_id = $(t).val();
        if(!parent_id > 0){
            return;
        }
        var url = '/index/index/getRegion/level/2/parent_id/' + parent_id;
        $.ajax({
            type : "GET",
            url  : url,
            error: function(request) {
                alert("服务器繁忙, 请联系管理员!");
                return;
            },
            success: function(v) {
                v = '<option value="0">选择城市</option>'+ v;
                $('#city').empty().html(v);
            }
        });
    }

    /**
     * 获取地区
     * @param t  城市select对象
     */
    function get_area(t){
        var parent_id = $(t).val();
        if(!parent_id > 0){
            return;
        }
        var url = '/index/index/getRegion/level/3/parent_id/' + parent_id;
        $.ajax({
            type : "GET",
            url  : url,
            error: function(request) {
                alert("服务器繁忙, 请联系管理员!");
                return;
            },
            success: function(v) {
                v = '<option>选择区域</option>'+ v;
                $('#district').empty().html(v);
            }
        });
    }
</script>